{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>INDEX</title>
    <style>
        /* 全局样式 */
        {% include 'css/resetcss.css' %}
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            font-size: 0.8rem;
        }

        /* 导航栏样式 */
        .navbar {
            height: 7vh;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            min-height: 8vh;
            color: rgba(0, 0, 0, 0.8);
        }

        /* 主要内容样式 */
        .main-content {
            height: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f8f8f8;
            padding: 7px;
        }

        footer {
            width: 100%;
            height: 4vh;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 0;
        }

        /* 样式代码用来生成圆形头像 */
        .headimg {
            aspect-ratio: 1/1;
            height: 6%;
            min-height: 5%;
            border-radius: 50%;
            position: absolute;
            top: 4%;
            right: 4%;
            display: flex block;
            justify-content: center;
            align-items: center;
        }

        /* 鼠标悬停时触发下拉选择框 */
        .headimg:hover {
            background-color: lightyellow;
        }

        .headimg img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        /* 下拉选择框的样式 */
        .dropdown-list {
            position: absolute;
            right: 0.8%;
            top: 10.3%;
            background-color: #f9f9f9;
            height: auto;
            border-radius: 4px;
            min-width: 10%;
            min-height: 10%;
            box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.2);
            z-index: 1;
            display: none;
            font-size: 0.5rem;
        }


        .logo {
            width: 15%;
            height: 10%;
            border-radius: 4px;
            position: absolute;
            font-size: 1.5rem;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .menu-list {
            width: 40%;
            height: 6%;
            border-radius: 4px;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            right: 10%;
            top: 4%;
        }

        .menu {
            width: 20%;
            height: 80%;
            border-radius: 4px;
            display: flex block;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-right: 20px;
            cursor: pointer;
        }

        .menu:hover {
            background-color: #f2f2f2;
        }

        .page {
            width: 100%;
            height: 100%;
            display: flex block;
            justify-content: center;
            align-items: center;
            text-align: center;
            transform: translate3d(0, 0, 0);
        }

        #index-page {
            display: none;
        }

        #function-page {
            display: none;
        }

        #shell-page {
            display: none;
        }


        .menu.selected {
            background-color: rgba(76, 175, 80, 0.7);
            color: rgb(255, 255, 255);
            font-weight: bold;
        }

        iframe {
            border: none;
        }

        .nickname {
            font-size: 0.8rem;
            font-weight: bold;
            text-align: center;
            width: 100%;
            height: 10%;
            margin-top: 10%;
        }

        .username {
            text-align: center;
            width: 100%;
            height: 10%;
            margin-top: 15%;
        }

        button[type="button"] {
            width: 70%;
            height: 30%;
            background-color: rgba(76, 175, 80, 0.8);
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            margin: 20% auto;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    </style>
</head>
<script src="{% static 'js/alert.js' %}"></script>
<script>
    function changePage(element) {
        // 移除所有菜单的选中状态
        const menuList = document.getElementsByClassName('menu');
        for (let i = 0; i < menuList.length; i++) {
            menuList[i].classList.remove('selected');
        }
        // 将被点击的菜单设置为选中状态
        element.classList.add('selected');

        // 切换首页显示
        let pageId = element.id + '-page'

        // 所有页面都不显示
        const pageList = document.getElementsByClassName('page');
        for (let i = 0; i < pageList.length; i++) {
            pageList[i].style.display = 'none';
        }
        let page = document.getElementById(pageId)
        page.style.display = 'block';
    }

    document.addEventListener('DOMContentLoaded', function () {
        const headimg = document.querySelector('.headimg');
        const dropdownList = document.querySelector('.dropdown-list');
        const index = document.getElementById('index-page')
        // 页面加载完成后，默认显示首页
        changePage(index);

        headimg.addEventListener('mouseover', function () {
            dropdownList.style.display = 'block';
        });

        headimg.addEventListener('mouseout', function () {
            dropdownList.style.display = 'none';
        });
        dropdownList.addEventListener('mouseover', function () {
            dropdownList.style.display = 'block';
        });
        dropdownList.addEventListener('mouseout', function () {
            dropdownList.style.display = 'none';
        });
    });
</script>
<script>
    function logout() {
        fetch("{% url 'logout' %}", {method: 'GET'})
            .then(response => {
                // 处理响应，比如重定向到登录页面或其他适当的页面
                alert_success("已退出")
                setTimeout(function () {
                    window.location.href = "{% url 'login_page' %}"
                }, 500)
            });
    }

    window.onload = (function () {
        // 在其他地方获取sessionStorage中的数据
        const userSession = sessionStorage.getItem('USERSESSION');
        if (userSession) {
            let userJson = JSON.parse(userSession)
            const headImg = document.getElementById('headimg');
            const avatarImg = document.createElement('img');
            avatarImg.src = userJson.headimg;
            headImg.appendChild(avatarImg);
            const nickname = document.getElementById('nickname');
            nickname.innerText = userJson.nickname
            const username = document.getElementById('username');
            username.innerText = userJson.username
        }
    });

</script>
<body>
<header>
    <div class="navbar">
        <div class="logo">Smile</div>
        <div class="headimg" id="headimg"></div>
        <div class="menu-list">
            <div class="menu selected" id="index" onclick="changePage(this)">首页</div>
            <div class="menu" id="function" onclick="changePage(this)">功能</div>
            <div class="menu" id="chat" onclick="changePage(this)">chat</div>
            <div class="menu">帮助</div>
            <div class="menu">关于</div>
        </div>
        <div class="dropdown-list">
            <div class="nickname" id="nickname"></div>
            <div class="username" id="username"></div>
            <button type="button" class="logout-button" onclick="logout()">退 出</button>
        </div>
    </div>
</header>

<div class="main-content">
    <div id="index-page" class="page">我是首页</div>
    <div id="function-page" class="page">
        <iframe src="{% url 'function_page' %}" width="100%" height="100%"></iframe>
    </div>
    <div id="chat-page" class="page">
        <iframe src="{% url 'function_page' %}" width="100%" height="100%"></iframe>
    </div>
</div>

<footer>
</footer>
</body>
</html>